<template>
  <div class="box">
    <keep-alive include="find">
      <router-view></router-view>
    </keep-alive>
    <van-tabbar
      active-color="#c0dffd"
      inactive-color="#B4B4BD"
      route
      placeholder
      class="tabbar"
      v-if="$route.meta.needTab"
    >
      <van-tabbar-item to="/box/home">
        <span>首页</span>
        <template #icon>
          <i class="iconfont f28">&#xe6d1;</i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/box/ask">
        <span>问答</span>
        <template #icon>
          <i class="iconfont f28">&#xe604;</i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/box/avideo">
        <span>视频</span>
        <template #icon>
          <i class="iconfont f28">&#xe608;</i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/box/my">
        <span>我的</span>
        <template #icon>
          <i class="iconfont f28">&#xe636;</i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
// + beforeCreate创建前:还不能访问data与methods
// + created:创建后,可以访问data与methods,还不能访问vue渲染后的dom
//   + 用于进入页面接口请求
// + beforeMount:渲染前,读取了el(确定一个vue使用范围),但是还没有开始渲染,还是不能访问vue渲染后的dom
// + mounted:渲染后,可以访问vue渲染后的dom
//   + 用于进入页面dom操作
// + beforeUpdate:更新前,vue页面中使用的数据已修改,但是还没有完成相应数据渲染
// + updated:更新后,vue页面中使用的数据已修改且页面已完成相应数据渲染
// + beforeDestroy:销毁前,都可以访问,准备销毁,往往用于善后(setInterval,hashChange)工作
// + destroyed:销毁后,中断了渲染,还可以访问data与methods,但是不能访问vue渲染后的dom
//   + 用于善后(setInterval,hashChange)工作
// + activated:激活时:(keep-alive)缓存 的组件,在打开时,会触发
// + deactivated:离开时,:(keep-alive)缓存 的组件,离开时(切换路由了),会触发
</script>

<style lang="less">
.box {
  height: 100%;
  .f28 {
    font-size: 28px;
  }
  .tabbar {
    display: flex;
    justify-content: space-around;
  }
}
</style>
